<template>
    <div class="container">
        <h2 class="title">
            <router-link to="/mine">
                <i class="el-icon-arrow-left">返回</i>
            </router-link>
            基本资料
        </h2>

        <el-form label-width="100px" :model="profile" ref="profile">
            <el-form-item label="会员UUID" prop="uuid">
                <el-input v-model="profile.uuid" placeholder="UUID" disabled></el-input>
            </el-form-item>

            <el-form-item label="昵　　称" prop="nickname" :rules="[
                { required: true, message: '昵称不能为空'},
            ]">
                <el-input v-model="profile.nickname" placeholder="请输入你的昵称" clearable></el-input>
            </el-form-item>

            <el-form-item label="所在城市" prop="city" :rules="[
                { required: true, message: '所在城市不能为空'},
            ]">
                <div class="block">
                    <el-cascader v-model="profile.city" :options="options" :props="{ expandTrigger: 'hover' }" @change="handleChange" clearable></el-cascader>
                </div>
            </el-form-item>

            <el-form-item label="性　　别" prop="gender">
                <el-radio-group v-model="profile.gender">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">女</el-radio>
                    <el-radio :label="3">保密</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="头　　像" prop="avatar">
                <span class="tips-avatar">（右侧，上传你的头像）</span>
                <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="profile.avatar" :src="profile.avatar" class="avatar">
                    <i v-else class="el-icon-camera-solid avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>


            <el-row>
                <el-button type="primary" @click="submitForm('profile')">保存信息</el-button>
            </el-row>
        </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                profile: {
                    uuid: '9FC774F426',
                    nickname: '',
                    city: '',
                    gender: 3,
                    birth: '1995.06',
                    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png' // https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png
                },
                options: [{
                        value: '120000',
                        label: '上海市',
                        children: [{
                            value: '120100',
                            label: '杨浦区'
                        }, {
                            value: '120700',
                            label: '闵行区'
                        }, {
                            value: '120400',
                            label: '浦东新区'
                        }]
                    },
                    {
                        value: '130000',
                        label: '河北省',
                        children: [{
                            value: '130100',
                            label: '石家庄'
                        }, {
                            value: '130200',
                            label: '唐山市'
                        }, {
                            value: '130400',
                            label: '邯郸市'
                        }]
                    },
                ],
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (!valid) {
                        return false
                    }
                })
            },
        },
    }
</script>

<style>
    .container {
        background-color: #FFF;
    }

    .el-form {
        padding: 0 20px 20px;
    }

    .el-form-item {
        margin-bottom: 15px;
        border-bottom: 1px solid var(--border-line);
    }

    .el-form-item__label {
        font-size: var(--font-sm-size);
    }

    .el-input__inner {
        font-size: var(--font-sm-size);
        border-radius: 0;
        border: none;
    }

    .el-radio-group {
        padding-left: 15px;
    }

    .el-radio__label {
        padding-left: 5px;
    }

    .el-radio {
        margin-right: 15px;
    }

    .el-cascader {
        display: block;
    }

    .container .el-row {
        margin-top: 25px;
    }

    .el-button {
        width: 100%;
    }

    .el-input.is-disabled .el-input__inner {
        background-color: transparent;
        color: var(--color-mdjor)
    }
</style>

<style scoped>
    .title {
        background-color: #e5e5e5;
        padding: 12px 0;
        text-align: center;
        border-bottom: 1px solid var(--border-line);
    }

    .title i {
        position: fixed;
        top: 0;
        left: 20px;
        width: 45px;
        height: 45px;
        line-height: 45px;
        text-align: center;
        color: var(--color-theme)
    }

    .avatar-uploader {
        height: 45px;
        float: right;
    }

    .el-upload {
        width: 36px;
        height: 36px;
        line-height: 36px;
        border: 1px solid #E5E5E5;
        border-radius: 50%;
    }

    .avatar-uploader img {
        width: 36px;
    }

    .tips-avatar {
        color: var(--color-minor);
        font-size: var(--font-sm-size);
    }
</style>